<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <script>
    let mCharts = echarts.init(document.getElementById('echarts'))
    mCharts.showLoading()
    
    axios.get('./data/person.json').then(value => {
      initEcharts(value.data)
      mCharts.hideLoading()
    })

    function initEcharts(data) {
      let axisData = data.map((item) => [item.weight, item.height])

      const option = {
        xAxis: {
          type: 'value',
          // 摆脱0值比例
          scale: true
        },
        yAxis: {
          type: 'value',
          // 摆脱0值比例
          scale: true
        },
        series: [
          {
            // type:'scatter',
            type: 'effectScatter', //开启涟漪动画
            showEffectOn: 'emphasis',// render(渲染完成，就有) emphasis(鼠标经过才有动画)
            // 设置动画的缩放比例
            rippleEffect: {
              scale: 1
            },
            data: axisData,
            // symbolSize:20
            symbolSize: function (arg) {
              let weight = arg[0]
              let height = arg[1] / 100
              // BMI=体重（千克）除以身高（米）的平方。
              let bmi = weight / (height * height)
              return bmi / 1.5
            },
            itemStyle: {
              // 根据 BMI 返回不同的颜色
              color: function (arg) {
                // console.log(arg); 
                let weight = arg.value[0]
                let height = arg.value[1] / 100

                let bmi = weight / (height * height)
                if (bmi >= 30) {
                  return 'red'
                } else if (bmi >= 28) {
                  return 'pink'
                } else if (bmi >= 20) {
                  return 'green'
                } else if (bmi >= 19) {
                  return 'pink'
                } else {
                  return 'red'
                }
              }
            }
          }
        ]
      }
      mCharts.setOption(option)
    }


  </script>
</body>

</html>